<template>
  <div class="home-big-con-box">
    <!-- 是否实名认证 -->
    <div class="real-container" v-if="isAuthentication&&isSuess">
      <div class="Authentication-box">
        <!-- <div class="Authentication-tit">我的门票</div> -->
        <div class="nav-box">
          <div class="nav">
            <div class="nav-img">
              <img src="https://gw.alicdn.com/tfs/TB15sG5JXOWBuNjy0FiXXXFxVXa-94-77.png">
            </div>
            <div class="nav-tit">大会实名制入场</div>
          </div>
          <div class="nav">
            <div class="nav-img">
              <img src="https://gw.alicdn.com/tfs/TB1sb3GJf1TBuNjy0FjXXajyXXa-70-80.png">
            </div>
            <div class="nav-tit">大会承诺信息保密</div>
          </div>
        </div>
        <div class="Authentication-remaid">
          <img src="https://gw.alicdn.com/tfs/TB12sG5JXOWBuNjy0FiXXXFxVXa-35-35.png"> 您未实名认证，请认证
        </div>
        <div @click="yonghuXyi" class="sub-btn">
          <img src="https://gw.alicdn.com/tfs/TB1.ZG5JXOWBuNjy0FiXXXFxVXa-274-85.png">
        </div>
      </div>
    </div>
    <!-- 门票列表 -->
    <div v-else class="ticket-box">
      <div v-for="(item, index) in myTicketList" :key="index" @click="linkReal(item)" v-bind:style="{ backgroundImage:'url(' + item.imgUrl + ')', 
      backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'cover'}" class="ticket">
        <div class="ticket-name">{{item.tTypeName}}</div>
        <div class="ticket-equity">
          {{ initDetail(item.purpose) }}
          <div style=" left: -15px;" class="ticket-equity-radius"></div>
          <div style="right:-15px" class="ticket-equity-radius"></div>
        </div>
        <div class="ticket-time">
          {{ $moment(item.stime).format('MM月DD日') }}- {{ $moment(item.etime).format('MM月DD日') }} {{ item.activeDate }}
        </div>
        <div class="ticket-time">
          地址:{{item.address}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hasCertify: false, //是否已经已经已经已经实名认证，
      needEnterFace: true, //是否需要露脸
      isSuess: false, //是否成功请求数据
      isAuthentication: false, //是否已经实名认证
      myTicketList: []
    };
  },
  created() {
    this.$ddapi.setRightFalse();
    this.getAuthenticationInfo();
  },
  methods: {
    // 得到认证信息
    getAuthenticationInfo() {
      this.isSuess = false;
      this.isAuthentication = false;

      // // 为了测试
      // this.isSuess = true;
      // this.isAuthentication = true;
      // return;

      this.$ddapi.showLoading("获取数据中");
      this.$http
        .post("/api/isv/mob/queryTicketListByLoginUser", {
          // userId: ""
        })
        .then(
          res => {
            this.$ddapi.hidePreloader();
            if (res.data.success) {
              this.isSuess = true;
              if (res.data.result) {
                this.myTicketList = res.data.result.myTicketList;
                if (this.myTicketList.length == 0) {
                  this.$ddapi.toast("未获取到门票信息");
                }
                this.hasCertify = res.data.result.hasCertify || false;
                this.needEnterFace = res.data.result.needEnterFace || true;
                // 如果需要录脸或者没有实名认证
                if (this.needEnterFace == true || this.hasCertify == false) {
                  this.isAuthentication = true;
                  this.isAuthentication = false; // 需求改成不需要
                }
              }
            } else {
              this.$ddapi.toast(res.data.errorMsg || "数据获取失败");
            }
          },
          err => {
            this.$ddapi.hidePreloader();
            this.$ddapi.toast("数据获取失败");
          }
        );
    },
    // 跳转到详情页
    linkReal(item) {
      this.$router.push({
        path: "/Details",
        query: {
          name: "details",
          parameter: item
        }
      });
      return;
      if (item.isreal) {
      } else {
        let t = this;
        dd.device.notification.confirm({
          message: "您还没有进行实名认证,请点击确认进行实名认证",
          title: "",
          buttonLabels: ["确认", "取消"],
          onSuccess: function(result) {
            if (result.buttonIndex == 0) {
              t.yonghuXyi();
            }
          },
          onFail: function(err) {}
        });
      }
    },
    // 初始化票权益
    initDetail(ticketDetail) {
      try {
        let detail = "";
        let detailArr = JSON.parse(ticketDetail);
        for (let i = 0; i < detailArr.length; i++) {
          if (i < detailArr.length - 1) {
            detail += detailArr[i] + " + ";
          } else {
            detail += detailArr[i];
          }
        }
        return detail;
      } catch (error) {
        return ticketDetail;
      }
    },
    // 点击实名认证按钮
    realClick(item) {
      if (item.isreal) {
        this.$ddapi.toast("您已实名认证");
      } else {
        let t = this;
        dd.device.notification.confirm({
          message: "您还没有进行实名认证,请点击确认进行实名认证",
          title: "",
          buttonLabels: ["确认", "取消"],
          onSuccess: function(result) {
            if (result.buttonIndex == 0) {
              t.yonghuXyi();
            }
          },
          onFail: function(err) {}
        });
      }
    },
    // 一键实名认证
    yonghuXyi() {
      let t = this;
      dd.device.notification.confirm({
        message:
          "大会采用人脸识别入场，基于为您提供服务的需要，请您确认：我同意大会举办方采集本人人脸数据并用于本人大会入场识别。",
        title: "人脸录入流程",
        buttonLabels: ["确认并下一步", "取消"],
        onSuccess: function(result) {
          if (result.buttonIndex == 0) {
            t.openFace();
          }
        },
        onFail: function(err) {}
      });
    },
    //录入人脸
    openFace() {
      if (!this.hasCertify) {
        this.openLink();
        return;
      }
      if (this.needEnterFace) {
        let url =
          "https://tms.dingtalk.com/markets/dingtalk/recordface2?wh_ttid=phone&corpId=" +
          localStorage.getItem("corpId") +
          "&appId=" +
          localStorage.getItem("agentId") +
          "&userId=" +
          sessionStorage.getItem("userId") +
          "&deviceUid=null&redirectUrl=https://alievent.aliyun.com/guodu/";
        dd.biz.util.openLink({
          url: url,
          onSuccess: function(result) {},
          onFail: function(err) {}
        });
      }
    },
    // 认证
    openLink() {
      let backUrl =
        "https://tms.dingtalk.com/markets/dingtalk/recordface2?wh_ttid=phone&corpId=" +
        localStorage.getItem("corpId") +
        "&appId=" +
        localStorage.getItem("agentId") +
        "&userId=" +
        sessionStorage.getItem("userId") +
        "&deviceUid=null&redirectUrl=https://alievent.aliyun.com/xinGongYiMob/?corpId=ding0065f62750ca49ef35c2f4657eb6378f&agentId=186888573";

      dd.biz.util.openLink({
        url:
          "https://h5.dingtalk.com/personalFaceAuth/index.html?fromlastpage=" +
          encodeURIComponent(backUrl) +
          "&noAlipay=1", //要打开链接的地址
        onSuccess: function(result) {},
        onFail: function(err) {}
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home-big-con-box {
  width: 100%;
  height: 100%;
}
.real-container {
  .Authentication-box {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    background: #fff;
    padding-bottom: 48px;
  }
  .Authentication-tit {
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 34px;
    padding: 40px 0;
    border-bottom: 8px solid #ebeced;
  }
  .nav-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom: 8px solid #ebeced;
    border-top: 1px solid #ebeced;
    .nav {
      margin: 60px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .nav-img > img {
      height: 60px;
    }
    .nav-tit {
      padding-top: 10px;
    }
  }
  .Authentication-remaid {
    font-size: 20px;
    color: #333435;
    display: flex;
    -webkit-display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    margin: 100px 0px 40px 0px;
    width: 100%;
  }
  .Authentication-remaid > img {
    width: 26px;
    margin-right: 16px;
  }
  .sub-btn {
    width: 100%;
    height: auto;
    text-align: center;
  }
  .sub-btn > img {
    width: 36%;
    margin: auto;
  }
}
// cnf
.ticket-box {
  padding: 26px 20px;
  width: 100%;
  height: auto;
}
.ticket {
  width: 100%;
  height: auto;
  // border: 1px solid red;
  margin-bottom: 16px;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  background: #fff;
}
.ticket-name,
.ticket-equity,
.ticket-time {
  width: 100%;
  height: auto;
  text-align: left;
  font-size: 30px;
  padding: 0px 10px;
}
.ticket-equity {
  font-size: 20px;
  position: relative;
  padding: 18px 10px;
  border-bottom: 1px dashed #000;
}
.ticket-equity-radius {
  position: absolute;
  bottom: -15px;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: #fff;
}
</style>
